cdk-remote-stackでWAFv2とCloudFrontのクロスリージョン参照を実装する

これはCDK Advent Calendar 2021の16日目の記事です。
もともとは3日目のために用意していたのですがのっぴきならない事情により差し替えられ、16日目にスライドしてきましたw

IoT事業部のやまたつです。

CDKでCloudFrontを実装してるとき、WebACLを使おうとしてクロスリージョン参照できなくて泣いたことはないですか？僕はあります！
先日以下の記事を見て「待ち焦がれたやつやん」ってなりました。

AWS CDKでリージョン間のクロススタック参照を簡単に実現！cdk-remote-stackを試してみた

今回はこのcdk-remote-stackを使って、WebACLとCloudFrontディストリビューションのクロスリージョン参照をしてみたいと思います。
リポジトリはこれです。作者はAWSの中の人ですね。

ファイル構成はこんな感じです。

• bin/
  • app.ts
• lib/
  • WafStack.ts
  • RemoteOutputStack.ts
  • CloudFront.ts

app.ts はこんな感じ。

import * as cdk from "@aws-cdk/core";
import { WebAclStack } from "../lib/WafStack";
import { RemoteOutputStack } from "../lib/RemoteOutputStack";
import { CloudFrontStack } from "../lib/CloudFront";

const app = new cdk.App();

const webAcl = new WebAclStack(app, 'WebAcl', {
  env: { region: "us-east-1" },
});
new cdk.CfnOutput(webAcl, "WebAclArn", { value: webAcl.webAclArn });

const remoteOutput = new RemoteOutputStack(app, 'RemoteOutput', {
  webAcl,
});

new CloudFrontStack(app, 'CloudFront', {
  webAclArn: remoteOutput.webAclArn,
});

13行目のRemoteOutputStackが今回の仕掛けになります。
このStackはenv: { region: "us-east-1" },を指定していないので、同じく指定していないCloudFrontStack.tsがremoteOutput.webAclArnを参照することができます。
中身を見ていきます！

RemoteOutputStack.ts

import { RemoteOutputs } from "cdk-remote-stack";
import * as cdk from "@aws-cdk/core";
import { WebAclStack } from "./WafStack";

type Props = cdk.StackProps & {
  webAcl: WebAclStack;
};

export class RemoteOutputStack extends cdk.Stack {
  public readonly webAclArn: string;

  constructor(scope: cdk.App, id: string, props: Props) {
    super(scope, id, props);

    this.addDependency(props.webAcl);
    const outputs = new RemoteOutputs(this, "Outputs", { stack: props.webAcl });
    const webAclArn = outputs.get("WebAclArn");

    this.webAclArn = webAclArn;
  }
}

WafStack.tsに依存してしまうところが悔しいところですが、クロスリージョン参照がこの行数で書けるなら毛ほどの痒さでしかありません。　
このStackは「webAclArnを参照するための窓口」くらいに考えるのが良いと思います。

WebAclStackとCloudFrontStackはそれぞれ、WebACLとCloudFrontDistributionを作っているだけです。 中身はこんな感じ

• https://github.com/yamatatsu/cdk-remote-stack-playground/tree/main/lib/WafStack.ts
• https://github.com/yamatatsu/cdk-remote-stack-playground/tree/main/lib/CloudFront.ts

コードの全量はここに。 https://github.com/yamatatsu/cdk-remote-stack-playground

以上！！